<template>
  <div class="index-content">
    <div class="bg_img" style="background-image: url('https://www.mljhotels.com/_nuxt/img/home.e0defde.png');"></div>
    <div class="context">
      <p class="title">ENJOY YOUR HOLIDAY</p>
      <p class="descript">自由自在 择美而居</p>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
    @font-face {
  font-family: "fangzhengkaiti";  /* 自定义字体名称 */
  src: 
    url("@/assets/fonts/LXGWWenKai-Light.woff2") format("woff2"), /* 优先加载 */
    url("@/assets/fonts/LXGWWenKai-Light.woff") format("woff");   /* 兼容旧浏览器 */
  font-weight: 400;      /* 字重 */
  font-style: normal;    /* 样式 */
  font-display: swap;    /* 避免文字闪烁 */
}
    .index-content{
      height: auto;
    .bg_img{
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100vh;
      position: absolute;
      width: 100vw;
    }
    .context{
      color: #fff;
      font-family: "fangzhengkaiti";
      left: 50%;
      top: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
      width: 100%;
      z-index: 9;
      p{
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
      }
      .title{
        font-size: 64px;
        text-align: center;
      }
      .descript{
        font-size: 40px;
        text-align: center;
      }
    }
  }
</style>